<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0069)http://www.zhangxinxu.com/study/200911/line-height-text-v-center.html -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>line-height与单行或多行文字的垂直居中</title>
<style type="text/css">
.single_line{
    line-height:30px;
    border:1px dashed #cccccc;
    padding-left:5px;
}
.mulit_line{
    border:1px dashed #cccccc;
    padding-left:5px;
}
.mulit_line span{
    display:-moz-inline-stack;
    display:inline-block;
    line-height:1.4em;
    vertical-align:middle;
}
.mulit_line i{
    width:0;
    line-height:150px;
    /*display:-moz-inline-stack;*/
    /*display:inline-block;*/
    /*vertical-align:middle;*/
    /*font-size:0;*/
}
</style>
</head>

<body>
<div class="zxx_out_box">
    <div class="zxx_in_box">
        <div class="zxx_header">
            <a href="http://www.zhangxinxu.com/">
                <img class="l" src="./line-height与单行或多行文字的垂直居中_files/index_logo.gif">
            </a>
            <span class="zxx_author_time">by zhangxinxu 2009-11-27 20:28</span>
        </div>
        <h1 class="zxx_title">line-height与单行或多行文字的垂直居中</h1>
        <div class="zxx_main_con">
			<strong class="f11">单行文字</strong>
            <p class="single_line mt10 mb20">
            	这是高度为30像素的单行文字
            </p>
            <strong class="f11">多行文字</strong>
            <p class="mulit_line mt10">
            	<span style="font-size:12px;">这里是高度为150像素的标签内的多行文字，文字大小为12像素。<br>这里是第二行，用来测试多行的显示效果。</span><i class="vm dib">&nbsp;</i>
            </p>
            <p class="mulit_line mt10">
            	<span style="font-size:20px;">这里是高度为150像素的标签内的多行文字，文字大小为20像素。<br>这里是第二行，用来测试多行的显示效果。</span><i class="vm dib">&nbsp;</i>
            </p>
        </div>
        <div class="zxx_footer">
            Copyright © by <a href="http://www.zhangxinxu.com/">张鑫旭-鑫空间-鑫生活</a>
            |
            <a href="http://www.zhangxinxu.com/wordpress/?p=384">该篇相关文章</a>
        </div>
    </div>
</div>
</body>
</html>
